﻿
.u-wrap { height: calc(100vh); }
.u-menu-wrap { flex: 1; display: flex; overflow: hidden;
    .u-tab-view { width: 100px; height: 100%; background: #f6f6f6;
        .u-tab-item { height: 55px; background: #f6f6f6; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #444; font-weight: 400; line-height: 1; }
        .u-tab-item-active { position: relative; color: #000; font-weight: 600; background: #fff; }
        .u-tab-item-active::before { content: ""; position: absolute; border-left: 4px solid #e02e24; height: 16px; left: 0; top: 20px; }
    }
    .right-box { background-color: rgb(250, 250, 250); width: calc(100% - 100px);
        .class-item { margin-bottom: 15px; background-color: #fff; padding: 8px; border-radius: 4px;
            .item-title { font-size: 12px; color: $u-main-color; font-weight: bold; }
            .item-container { display: flex; flex-wrap: wrap;
                .thumb-box { width: 33.333333%; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 10px;
                    .item-menu-name { font-weight: normal; font-size: 12px; color: $u-main-color; margin-top: 7.5px; }
                }
            }
        }
    }
}


.main {position: relative; width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; }

.nav { width: 100%; height: 212rpx; flex-shrink: 0; display: flex; flex-direction: column;
    .header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20rpx; background-color: #ffffff; height: 140rpx;
        .left { flex: 1; display: flex; flex-direction: column;
            .store-name { display: flex; justify-content: flex-start; align-items: center; font-size: 32rpx; margin-bottom: 10rpx;
                .iconfont { margin-left: 10rpx; line-height: 100%; }
            }
            .store-location { display: flex; justify-content: flex-start; align-items: center; color: #919293; font-size: 24rpx;
                .iconfont { vertical-align: middle; display: table-cell; color: #ADB838; line-height: 100%; }
            }
        }
        .right { background-color: #F5F5F5; border-radius: 38rpx; display: flex; align-items: center; font-size: 24rpx; padding: 0 38rpx; color: #919293;
            .dinein, .takeout { position: relative; display: flex; align-items: center;
                &.active { padding: 14rpx 38rpx; color: #ffffff; background-color: #E8EACF; border-radius: 38rpx; }
            }
            .takeout { margin-left: 20rpx; height: 100%; flex: 1; padding: 14rpx 0; }
            .dinein.active { margin-left: -38rpx; }
            .takeout.active { margin-right: -38rpx; }
        }
    }
    .coupon { flex: 1; width: 100%; background-color: #E8EACF; font-size: 28rpx; color: #ADB838; padding: 0 20rpx; display: flex; align-items: center; overflow: hidden;
        .title { flex: 1; margin-left: 10rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
        .iconfont { line-height: 100%; }
    }
}
.content { flex: 1; overflow: hidden; width: 100%; display: flex;
    .menus { width: 200rpx; overflow: hidden; background-color: #F5F5F5;
            .wrapper { width: 100%; height: 100%; background-color: #fafafa;
                .menu { 
                    display: flex; align-items: center; justify-content: flex-start; padding: 30rpx 20rpx; font-size: 26rpx; color: #919293; position: relative;
                    &:nth-last-child(1) { margin-bottom: 130rpx; }
                    &.current { 
                        position: relative;
                        background-color: #ffffff; color: #1aad19; 
                        &::before{
                            display: block;
                            content: "";
                            width: 8rpx;
                            height: 70%;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            background-color: #1aad19;
                            border-radius: 0 5rpx 5rpx 0;
                        }
                    }
                    .tit-box{
                        display: flex;
                        align-items: center;
                        
                        margin: auto;
                    }
                    .tip{
                        width: 25rpx;
                        height: 25rpx;
                        display: inline-block; 
                        margin-right: 5rpx;
                    }
                    .dot { position: absolute; width: 34rpx; height: 34rpx; line-height: 34rpx; font-size: 22rpx; background-color: #ADB838; color: #ffffff; top: 16rpx; right: 10rpx; border-radius: 100%; text-align: center; }
                }
            }
    }

    .goods {position: relative; flex: 1; overflow: hidden; background-color: #ffffff;
        .wrapper { width: 100%; height: 100%; padding: 20rpx;
            .ads { height: calc(300 / 550 * 510rpx);
                image { width: 100%; height: 100%; border-radius: 8rpx; }
            }
            .list { width: 100%; font-size: 28rpx; padding-bottom: 30rpx;
                .category { width: 100%;
                    .title { padding: 30rpx 0; display: flex; align-items: center; color: #5A5B5C;
                        .icon { width: 38rpx; height: 38rpx; margin-left: 10rpx; }
                    }
                }
                .items { display: flex; flex-direction: column;
                    .good { display: flex; align-items: center; margin-bottom: 30rpx;
                        .image { width: 160rpx; height: 160rpx; margin-right: 20rpx; border-radius: 8rpx; }
                        .right { flex: 1; height: 160rpx; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
                            .name { margin-bottom: 10rpx; }
                            .tips { width: 100%; height: 40rpx; line-height: 40rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24rpx; color: #919293; margin-bottom: 10rpx; }
                            .price_and_action { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-top: 5px;
                                .price { font-size: 28rpx; font-weight: 600; color: #e02e24; }
                                .btn-group { display: flex; justify-content: space-between; align-items: center; position: relative;
                                    .btn { padding: 0 20rpx; box-sizing: border-box; font-size: 24rpx; height: 44rpx; line-height: 44rpx;
                                        &.property_btn { border-radius: 24rpx; }
                                        &.add_btn,
                                        &.reduce_btn { padding: 0; width: 44rpx; border-radius: 44rpx; }
                                    }
                                    .dot { position: absolute; background-color: #ffffff; border: 1px solid #ADB838; color: #ADB838; font-size: 24rpx; width: 36rpx; height: 36rpx; line-height: 36rpx; text-align: center; border-radius: 100%; right: -12rpx; top: -10rpx; }
                                    .number { width: 44rpx; height: 44rpx; line-height: 44rpx; text-align: center; }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


.cart-box { position: fixed; bottom: 30rpx; left: 140rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 10;
    .cart-img { width: 96rpx; height: 96rpx; position: relative; margin-top: -48rpx; }
    .pay-btn { height: 100%; padding: 0 30rpx; color: #FFFFFF; border-radius: 0 50rpx 50rpx 0; display: flex; align-items: center; font-size: 28rpx; }
    .mark { padding-left: 46rpx; margin-right: 30rpx; position: relative;
        .tag { background-color: #FAB714; color: #ffffff; display: flex; justify-content: center; align-items: center; font-size: 24rpx; position: absolute; right: -10rpx; top: -50rpx; border-radius: 100%; padding: 4rpx; width: 40rpx; height: 40rpx; opacity: .9; }
    }
    .price { flex: 1; color: #5A5B5C; }
}



.text-color-base { color: #5A5B5C; }
text-color-assist { color: #919293; }
.overflow-hidden { overflow: hidden !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.col3Box { width: 33%; padding: 5px; float: left; }
.primary-classification{
    height: 90px;
    padding: 10px 0 0;
    display: flex;
    justify-content: space-between;
    background-color: #e9f6ec;
    .primary-view{ 
        width: 90%;
        white-space: nowrap;
        .menu-box{
            display: inline-block;
            width: 140rpx;
            .img{
                display: block;
                margin: 0 auto;
                width: 80rpx;
                height: 80rpx;
                border-radius: 15px;
                margin-bottom: 5rpx;
                border: 2px solid #fff;
            }
            .name{
                padding: 5rpx 0;
                margin: 0 5rpx;
                font-size: 25rpx;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowap;
            }
        }
        .active{
            .img{ 
                border: 2px solid #1aad19;
            }
            .name{ 
                background-color: #1aad19;
                border-radius: 20rpx;
                color: #fff;
            }
        } 
    }
    .primary-classification-all{ 
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 15rpx; 
        margin-top: -15rpx;
        .tit{
            writing-mode:vertical-rl;
            font-size: 27rpx;
            color: #1aad19;
            margin-right: 2rpx;
            letter-spacing: 5rpx;
        }
        .close{
            padding: 20rpx;
        }
    }
}

.all-primary-popup{
    position: fixed;
    left: 0;
    top: 88px;
    z-index: 1000;
    width: 100%;
    height: 100%;
    .mask{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    .list-box{
        padding: 10px;
        background-color: #fff;
        position: relative;
        z-index: 9999;
        .title-box{
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .tit{
                font-size: 30rpx;
                color: #5A5B5C;
            }
            
        }
        .menu-layout{
            display: flex;
            flex-wrap: wrap;
		    max-height: 500rpx;
		    overflow: scroll;
            .menu-box{
                display: inline-block;
                width: 140rpx;
                margin-bottom: 25rpx;
				max-height: 300rpx;
				overflow: scroll;
                .img{
                    display: block;
                    margin: 0 auto;
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 15px;
                    margin-bottom: 10rpx;
                }
                .name{
                    padding: 5rpx 0;
                    margin: 0 5rpx;
                    font-size: 25rpx;
                    text-align: center;
                }
            }
            .active{
                .img{ 
                    border: 2px solid #1aad19;
                }
                .name{ 
                    background-color: #1aad19;
                    border-radius: 20rpx;
                    color: #fff;
                }
            }
        }
    }
}

.sticky-box{
    display: flex; 
    justify-content:space-between;
    padding: 20rpx;
    background-color: #fff;
    .sticky-view{
        width: 90%;  
        white-space: nowrap;
        height: 50rpx;
        .item{
            display: inline-block;
            width: 156rpx;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 27rpx;
            background-color: #f7f7f7;
            text-align: center;
            border-radius: 5rpx;
            margin-right:20rpx ;
            padding: 0 5rpx;
            .name{
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
        .active{
            background-color: #edf8f2;
            color: #1aad19;
        }
    }
    .icon{
        position: relative;
        width: 10%; 
        height: 50rpx;
        line-height: 50rpx; 
        display: flex;
        justify-content: center;
        &::before{
            display: block;
            content: "";
            width: 1rpx;
            height: 100%;
            position: absolute;
            left: 0;
            top: 50%; 
            transform: translateY(-50%);
            background-color: #f7f7f7;
            box-shadow: -1px 0 5rpx rgba(0,0,0,.2);
        }
    }
}

.sticky-popup-box{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 44px;
   
    z-index: 999; 
    .mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.2);
    }
    .popup-layout{
        position: relative;
        padding: 10px;
        display: flex;
        flex-wrap: wrap; 
        background-color: #fff;
        gap: 20rpx;
        .popup{
            width: 156rpx;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 27rpx;
            background-color: #f7f7f7;
            text-align: center;
            border-radius: 5rpx;
        }
        .active{
            background-color: #edf8f2;
            color: #1aad19;
        }
    }
}